
<template>
    <el-form :model="formData" ref="elFormRef" :rules="rule" label-position="left" label-width="150px" size="large"
      @submit.native.prevent>
      <el-row>
        <el-col :span="2" class="grid-cell">
        </el-col>
        <el-form-item>
          <!-- <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" @click="back">返回</el-button> -->
          <el-button type="primary" @click="exportWord">导出</el-button>
        </el-form-item>

      </el-row>
      <div class="card-container">
        <el-card style="{width: 100% !important}" shadow="never">
          <div slot="header" class="clear-fix">
            <span>基本信息</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
          <el-row>
            <el-col :span="8" class="grid-cell">
              <el-form-item label="编号：" prop="number" class="label-center-align">
                <el-input v-model="formData.number" type="text" placeholder="PG-SYB-000001" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="grid-cell">
              <el-form-item label="制造序列号：" prop="manufacturing_serial_number"
                class="required label-center-align">
                <el-input v-model="formData.manufacturing_serial_number" type="text" placeholder="001"
                  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="grid-cell">
              <el-form-item label="排故日期：" prop="troubleshooting_date" class="required label-center-align">
                <el-date-picker v-model="formData.troubleshooting_date" type="date" placeholder="选择日期" :clearable="true"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="故障对应的工艺设计文件号：" label-width="300px" prop="process_design_document_number"
                class="required label-center-align">
                <el-input v-model="formData.process_design_document_number" type="text" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="负责工艺员：" prop="responsible_craftman" class="required label-center-align">
                <el-input v-model="formData.responsible_craftman" type="text" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="grid-cell">
              <el-form-item label="故障描述：" prop="fault_description" class="label-center-align">
                <el-input type="textarea" v-model="formData.fault_description" rows="3"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="DISR号填写：" prop="dISR_number" class="label-center-align">
                <el-input v-model="formData.dISR_number" type="text" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="static-content-item" v-show="false">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <div class="card-container">
        <el-card style="{width: 100% !important}" shadow="never">
          <div slot="header" class="clear-fix">
            <span>排故步骤</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
          <el-row>
            <el-col :span="5" class="grid-cell">
              <el-form-item label="序号" prop="serial_number1" class="label-center-align">
                <el-input v-model.number="formData.serial_number1"  clearable ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="17" class="grid-cell">
              <el-form-item label="检查或操作描述" prop="operation_description1" class="label-center-align">
                <el-input type="textarea" v-model="formData.operation_description1" clearable rows="3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="是否需要质量检查:" prop="is_quality_inspection_required1">
                <el-switch v-model="formData.is_quality_inspection_required1" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
              </el-form-item>
        
            </el-col>
          </el-row>
          <div class="static-content-item">
            <el-divider direction="horizontal"></el-divider>
          </div>
          <el-row>
            <el-col :span="5" class="grid-cell">
              <el-form-item label="序号" prop="serial_number2" class="label-center-align">
                <el-input v-model.number="formData.serial_number2"  clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="17" class="grid-cell">
              <el-form-item label="检查或操作描述" prop="operation_description2" class="label-center-align">
                <el-input type="textarea" v-model="formData.operation_description2" clearable rows="3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="是否需要质量检查:" prop="is_quality_inspection_required2">
                <el-switch v-model="formData.is_quality_inspection_required2" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item">
            <el-divider direction="horizontal"></el-divider>
          </div>
          <el-row>
            <el-col :span="5" class="grid-cell">
              <el-form-item label="序号" prop="serial_number3" class="label-center-align">
                <el-input v-model.number="formData.serial_number3"  clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="17" class="grid-cell">
              <el-form-item label="检查或操作描述" prop="operation_description3" class="label-center-align">
                <el-input type="textarea" v-model="formData.operation_description3" clearable rows="3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="是否需要质量检查:" prop="is_quality_inspection_required3">
                <el-switch v-model="formData.is_quality_inspection_required3" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item">
            <el-divider direction="horizontal"></el-divider>
          </div>
          <el-row>
            <el-col :span="5" class="grid-cell">
              <el-form-item label="序号" prop="serial_number4" class="label-center-align">
                <el-input v-model.number="formData.serial_number4"  clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="17" class="grid-cell">
              <el-form-item label="检查或操作描述" prop="operation_description4" class="label-center-align">
                <el-input type="textarea" v-model="formData.operation_description4" clearable rows="3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="是否需要质量检查:" prop="is_quality_inspection_required4">
                <el-switch v-model="formData.is_quality_inspection_required4" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="static-content-item">
            <el-divider direction="horizontal"></el-divider>
          </div>
          <el-row>
            <el-col :span="5" class="grid-cell">
              <el-form-item label="序号" prop="serial_number5" class="label-center-align">
                <el-input v-model.number="formData.serial_number5"  clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="17" class="grid-cell">
              <el-form-item label="检查或操作描述" prop="operation_description5" class="label-center-align">
                <el-input type="textarea" v-model="formData.operation_description5" clearable rows="3" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="grid-cell">
              <el-form-item label="是否需要质量检查:" prop="is_quality_inspection_required5">
                <el-switch v-model="formData.is_quality_inspection_required5" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="static-content-item" v-show="false">
        <el-divider direction="horizontal"></el-divider>
      </div>
      <div class="card-container">
        <el-card style="{width: 100% !important}" shadow="never">
          <div slot="header" class="clear-fix">
            <span>章节信息</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
          <el-row>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="ATA章节（一级）:" prop="ata_chapter_level1"
                class="required label-center-align">
                <el-input v-model="formData.ata_chapter_level1" type="text" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="grid-cell">
              <el-form-item label="ATA章节（二级）：" prop="ata_chapter_level2"
                class="required label-center-align">
                <el-input v-model="formData.ata_chapter_level2" type="text" clearable placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <!-- <div class="card-container">
        <el-card style="{width: 100% !important}" shadow="never">
          <div slot="header" class="clear-fix">
            <span>附件上传</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
          <el-row>
            <el-col :span="5" class="grid-cell">
              <el-form-item label="纸质排故单上传" prop="pictureupload" class="label-center-align">
                <el-upload :file-list="pictureuploadFileList" :headers="pictureuploadUploadHeaders"
                  :data="pictureuploadUploadData" list-type="picture-card" show-file-list :limit="3"> <template
                    #default><i class="el-icon-plus"></i></template></el-upload>
              </el-form-item>
              <el-form-item label="纸质排故单上传:" prop="upload_troubleshooting_form">
                <el-input v-model="formData.upload_troubleshooting_form" :clearable="true" placeholder="请输入" />
              </el-form-item>
  
            </el-col>
            
            <el-col :span="11" class="grid-cell">
              <el-form-item label="表格上传" prop="excelupload" class="label-center-align">
                <el-upload :file-list="exceluploadFileList" :headers="exceluploadUploadHeaders"
                  :data="exceluploadUploadData" list-type="picture-card" show-file-list :limit="3"> <template
                    #default><i class="el-icon-plus"></i></template></el-upload>
              </el-form-item>
              <el-form-item label="附件上传:" prop="upload_attachment">
                <el-input v-model="formData.upload_attachment" :clearable="true" placeholder="请输入" />
              </el-form-item>  
            </el-col>
          </el-row>
        </el-card>
      </div> -->
      <div v-loading.fullscreen.lock="fullscreenLoading">
    <div class="gva-table-box">
      <warning-bar
        title="附件上传"
      />
      <div class="gva-btn-list">
        <upload-image
          v-model:imageUrl="imageUrl"
          :file-size="512"
          :max-w-h="1080"
          :ateremark="search.keyword"
          class="upload-btn"
          @on-success="getTableData"
        />

        <!-- <el-form ref="searchForm" :inline="true" :model="search">
          <el-form-item label="">
            <el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="search" @click="getTableData">查询</el-button>
          </el-form-item>
        </el-form> -->

      </div>

      <el-table :data="tableData">
        <el-table-column align="left" label="预览" width="400">
          <template #default="scope">
            <CustomPic pic-type="file" :pic-src="scope.row.url" />
          </template>
        </el-table-column>
        <el-table-column align="left" label="日期" prop="UpdatedAt" width="180">
          <template #default="scope">
            <div>{{ formatDate(scope.row.UpdatedAt) }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="left" label="文件名/备注" prop="name" width="180">
          <template #default="scope">
            <div class="name" @click="editFileNameFunc(scope.row)">{{ scope.row.name }}</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="left" label="链接" prop="url" min-width="300" /> -->
        <el-table-column align="left" label="标签" prop="tag" width="100">
          <template #default="scope">
            <el-tag
              :type="scope.row.tag === 'jpg' ? 'primary' : 'success'"
              disable-transitions
            >{{ scope.row.tag }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="left" label="操作" width="160">
          <template #default="scope">
            <el-button icon="download" type="primary" link @click="downloadFile(scope.row)">下载</el-button>
            <el-button icon="delete" type="primary" link @click="deleteFileFunc(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[3, 5, 10]"
          :style="{ float: 'right', padding: '20px' }"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

      </div>
      <div class="card-container">
        <el-card style="{width: 100% !important}" shadow="never">
          <div slot="header" class="clear-fix">
            <span>结论录入</span>
            <i class="float-right el-icon-arrow-down"></i>
          </div>
          <el-form-item label="结论" prop="conclusion" class="label-center-align">
            <el-input type="textarea" v-model="formData.conclusion" rows="3" placeholder="请输入"></el-input>
          </el-form-item>
        </el-card>
      </div>
      <el-form-item label="完成时间:" prop="complete_date">
          <el-date-picker v-model="formData.complete_date" type="date" placeholder="选择日期" :clearable="true"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否通过:" prop="is_passed">
          <el-switch v-model="formData.is_passed" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </el-form-item>
    </el-form>
 


  </template>
  <script>
  export default {
    name: 'Case_struct'
  }
  </script>
  
  <script setup>
// 图片上传
import { getFileList, deleteFile, editFileName } from '@/api/fileUploadAndDownload'
import { downloadImage } from '@/utils/downloadImg'
import CustomPic from '@/components/customPic/index.vue'
// import UploadImage from '@/components/upload/image.vue'
import UploadCommon from '@/components/upload/common.vue'
import { formatDate } from '@/utils/format'
import WarningBar from '@/components/warningBar/warningBar.vue'

import { ElMessageBox } from 'element-plus'



// 图片上传 end
  import {
    createCase_struct,
    updateCase_struct,
    findCase_struct
  } from '@/api/sysCaseLibrary'
  // 自动获取字典
  import UploadImage from '@/components/upload/image.vue'

  import { getDictFunc } from '@/utils/format'
  import { useRoute, useRouter } from "vue-router"
  import { ElMessage } from 'element-plus'
  import { ref, reactive } from 'vue'
  import JSZipUtils from 'jszip-utils'
  import JSZip from 'pizzip'
  import Docxtemplater from 'docxtemplater'
  import { saveAs } from 'file-saver'


  // 图片上传
  const path = ref(import.meta.env.VITE_BASE_API)

const imageUrl = ref('')
const imageCommon = ref('')

const page = ref(1)
const total = ref(0)
const pageSize = ref(3)
const search = ref({keyword:'ateateate'})
const tableData = ref([])

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  page.value = val
  getTableData()
}

// 查询
const getTableData = async() => {

  console.log("ate log tableData",tableData)
  const table = await getFileList({ page: page.value, pageSize: pageSize.value, ...search.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
}
getTableData()


const deleteFileFunc = async(row) => {
  ElMessageBox.confirm('此操作将永久删除文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async() => {
      const res = await deleteFile(row)
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功!',
        })
        if (tableData.value.length === 1 && page.value > 1) {
          page.value--
        }
        getTableData()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const downloadFile = (row) => {
  if (row.url.indexOf('http://') > -1 || row.url.indexOf('https://') > -1) {
    console.log("ate download1",row.url)
    downloadImage(row.url, row.name)
  } else {
    debugger
    downloadImage(path.value + '/' + row.url, row.name)
    console.log("ate download2",path.value + '/' + row.url)
  }
}

/**
 * 编辑文件名或者备注
 * @param row
 * @returns {Promise<void>}
 */
const editFileNameFunc = async(row) => {
  ElMessageBox.prompt('请输入文件名或者备注', '编辑', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\S/,
    inputErrorMessage: '不能为空',
    inputValue: row.name
  }).then(async({ value }) => {
    row.name = value
    console.log("ate log row picture",row)
    const res = await editFileName(row)
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '编辑成功!',
      })
      getTableData()
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消修改'
    })
  })
}
  // 图片end
  const route = useRoute()
  const router = useRouter()
  
  const type = ref('')
  const formData = ref({
              
              number: '',
              manufacturing_serial_number: '',
              troubleshooting_date: new Date(),
              process_design_document_number: '',
              responsible_craftman: '',
              fault_description: '',
              dISR_number: '',
              serial_number1: 0,
              operation_description1: '',
              is_quality_inspection_required1: false,
              serial_number2: 0,
              operation_description2: '',
              is_quality_inspection_required2: false,
              serial_number3: 0,
              operation_description3: '',
              is_quality_inspection_required3: false,
              serial_number4: 0,
              operation_description4: '',
              is_quality_inspection_required4: false,
              serial_number5: 0,
              operation_description5: '',
              is_quality_inspection_required5: false,
              ata_chapter_level1: '',
              ata_chapter_level2: '',
              upload_troubleshooting_form: '',
              upload_attachment: '',
              conclusion: '',
              complete_date: new Date(),
              is_passed: false,
          })
  const ateremark = ref('')
  // 验证规则
  const rule = reactive({
                 manufacturing_serial_number : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
                 troubleshooting_date : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
                 process_design_document_number : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
                 responsible_craftman : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
                 fault_description : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
                 ata_chapter_level1 : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
                 ata_chapter_level2 : [{
                     required: true,
                     message: '',
                     trigger: ['input','blur'],
                 }],
  })
  
  const elFormRef = ref()
  
  // 初始化方法
  const init = async () => {
   // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例

      if (route.query.id) {
        
        const res = await findCase_struct({ ID: route.query.id })
        if (res.code === 0) {
          formData.value = res.data.recase_
          type.value = 'update'
        }
        search.value['keyword'] = 'case_table_'+route.query.id.toString()
        

      } else {
        type.value = 'create'
      }

      if(route.query.fault_number){
        formData.value.ata_chapter_level1 = route.query.ata_chapter_level1,
        formData.value.ata_chapter_level2 = route.query.ata_chapter_level2,
        formData.value.number = route.query.fault_number
      }

      getTableData()
      // console.log("route.query.id",route.query.id)
      // console.log("route.query.createForm",route.query.createForm)
      // console.log("formata.value",formData.value)
  }
  
  init()
  // 保存按钮
  const save = async() => {
        console.log(formData.value)
        elFormRef.value?.validate( async (valid) => {
           if (!valid) return
              let res
             switch (type.value) {
               case 'create':
                 res = await createCase_struct(formData.value)
                 break
               case 'update':
                 res = await updateCase_struct(formData.value)
                 break
               default:
                 res = await createCase_struct(formData.value)
                 break
             }
             if (res.code === 0) {
               ElMessage({
                 type: 'success',
                 message: '创建/更改成功'
               })
             }
         })
  }
  
  // 返回按钮
  const back = () => {
      router.go(-1)
  }
  
  const exportWord=async()=> {
  JSZipUtils.getBinaryContent('/api/uploads/file/export1.docx', function (error, content) {
    // 抛出异常
    if (error) {
      console.log('b')
      throw error
    }
    // 创建一个JSZip实例，内容为模板的内容
    let zip = new JSZip(content)
    // 创建并加载docxtemplater实例对象
    let doc = new Docxtemplater().loadZip(zip)
    // 设置模板变量的值
    if (formData.value.operation_description1===undefined){
      formData.value.operation_description1 = ' '
      formData.value.is_quality_inspection_required1 = ' '
    }else{
      if (formData.value.is_quality_inspection_required1 ==true){
        formData.value.is_quality_inspection_required1 = "是"
      }else{
        formData.value.is_quality_inspection_required1 = "否"
      }
    }
    if (formData.value.operation_description2===undefined){
      formData.value.operation_description2 = ' '
      formData.value.is_quality_inspection_required = ' '
    }else{
      if (formData.value.is_quality_inspection_required2 ==true){
        formData.value.is_quality_inspection_required2 = "是"
      }else{
        formData.value.is_quality_inspection_required2 = "否"
      }
    }
    if (formData.value.operation_description3===undefined){
      formData.value.operation_description3 = ' '
      formData.value.is_quality_inspection_required3 = ' '
    }else{
      if (formData.value.is_quality_inspection_required3 ==true){
        formData.value.is_quality_inspection_required3 = "是"
      }else{
        formData.value.is_quality_inspection_required3 = "否"
      }
    }
    if (formData.value.operation_description4===undefined){
      formData.value.operation_description4 = ' '
      formData.value.is_quality_inspection_required4 = ' '
    }else{
      if (formData.value.is_quality_inspection_required4 ==true){
        formData.value.is_quality_inspection_required4 = "是"
      }else{
        formData.value.is_quality_inspection_required4 = "否"
      }
    }
    if (formData.value.operation_description5===undefined){
      formData.value.operation_description5 = ' '
      formData.value.is_quality_inspection_required5 = ' '
    }else{
      if (formData.value.is_quality_inspection_required5 ==true){
        formData.value.is_quality_inspection_required5 = "是"
      }else{
        formData.value.is_quality_inspection_required5 = "否"
      }
    }
             

    console.log("ate",formData.value)
    doc.setData({
      ...formData.value,
    })
    try {
      // 用模板变量的值替换所有模板变量
      doc.render()
    } catch (error) {
      // 抛出异常
      // let e = {
      //   message: error.message,
      //   name: error.name,
      //   stack: error.stack,
      //   properties: error.properties,
      // }
      this.$message.error('导出报表失败')
      throw error
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    let out = doc.getZip().generate({
      type: 'blob',
      mimeType:
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    })
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, '机上功能试验排故过程记录表.docx')
  })
}
  </script>
  
  
  <style lang="scss">
    .el-input-number.full-width-input,
    .el-cascader.full-width-input {
      width: 100% !important;
    }
    
    .el-form-item--medium {
      .el-radio {
        line-height: 36px !important;
      }
      
      .el-rate {
        margin-top: 8px;
      }
    }
    
    .el-form-item--small {
      .el-radio {
        line-height: 32px !important;
      }
      
      .el-rate {
        margin-top: 6px;
      }
    }
    
    .el-form-item--mini {
      .el-radio {
        line-height: 28px !important;
      }
      
      .el-rate {
        margin-top: 4px;
      }
    }
    
    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }
    
    .clear-fix:after {
      clear: both;
    }
    
    .float-right {
      float: right;
    }
    
  </style>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
  
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
    }
    
    div.tab-container {}
    
    .label-left-align ::v-deep .el-form-item__label {
      text-align: left;
    }
    
    .label-center-align ::v-deep .el-form-item__label {
      text-align: center;
    }
    
    .label-right-align ::v-deep .el-form-item__label {
      text-align: right;
    }
    
    .custom-label {}
    
    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
  
      ::v-deep .el-divider--horizontal {
        margin: 0;
      }
    }
    
  </style>



